<template>
  <div class="page">
    <back-btn></back-btn>
    <div class="school-info">
      <div class="item item-avatar-left title">
        <img v-if="data.collegeInfo" :src="data.collegeInfo.schoolBadge | imgResize(50,50)" />
        <div class="school-content">
          <div class="city">
            <h3>{{data.name}}</h3>
            <span v-if="data.city">{{data.city}}</span>
          </div>
          <div class="item">
            <p>
              <span v-if="data.collegeLevel.length>0" class="stable" v-for="(item,index) in data.collegeLevel" :key="index">{{item.name}}&nbsp;&nbsp;</span>
              <span v-if="data.collegeType" class="stable"> {{data.collegeType.name}}</span>
            </p>
          </div>
        </div>
      </div>
      <div>
        <button :class="isPraise?'button button-positive':'button positive border-positive button-clear'" @click="follow">{{isPraise?'已关注':'关注'}}</button>
      </div>
    </div>
    <tab-bar :tabsData="list" :currentIndex="curIndex" @tabClick="tabSwitch"></tab-bar>
    <div class="content">
      <div class="tab-content">
        <div v-show="curIndex===0" class="scroll-wrap" v-if="data.collegeInfo">
          <div class="list list-wrap" v-if="data.collegeInfo.description">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3>简介</h3>
            </div>
            <p class="item item-text-wrap text">
              {{data.collegeInfo.description.trim()}}
            </p>
          </div>
          <div class="item item-text-wrap icon-text">
            <div class="row row-wrap">
              <div class="col-3" v-if="data.collegeInfo.createdDate">
                <span class="icon icon-font icon-zdxk"></span>
                <span class="text">创办时间</span>
                <span class="positive">{{data.collegeInfo.createdDate}}</span>
              </div>
              <div class="col-3">
                <span class="icon icon-font icon-zdxk"></span>
                <span class="text">特色专业</span>
                <span class="positive">{{data.collegeInfo.numberOfSpecialty||0}}</span>
              </div>
              <div class="col-3">
                <span class="icon icon-font icon-zdxk"></span>
                <span class="text">重点学科</span>
                <span class="positive">{{data.collegeInfo.keyDiscipline||0}}</span>
              </div>
              <div class="col-3">
                <span class="icon icon-font icon-zdsys"></span>
                <span class="text">重点实验室</span>
                <span class="positive">{{data.collegeInfo.keyLaboratory||0}}</span>
              </div>
            </div>
          </div>
          <div class="list list-wrap" v-if="data.collegeInfo.doubleTopConstructionSpecialtyDesc">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3>双一流建设专业</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.collegeInfo.doubleTopConstructionSpecialtyDesc}}
            </div>
          </div>
          <div class="list list-wrap" v-if="data.collegeInfo.keyDisciplineDesc">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3>重点学科</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.collegeInfo.keyDisciplineDesc}}
            </div>
          </div>
          <div class="list list-wrap" v-if="data.collegeInfo.majorDesc">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3>特色专业</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.collegeInfo.majorDesc}}
            </div>
          </div>
          <div class="list list-wrap" v-if="data.collegeInfo.keyLaboratoryDesc">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3>重点实验室</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.collegeInfo.keyLaboratoryDesc}}
            </div>
          </div>
          <div class="list list-wrap" v-if="data.collegeInfo.address||data.collegeInfo.officialWebsite">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3>联系方式</h3>
            </div>
            <div class="item item-text-wrap text">
              <p v-if="data.collegeInfo.address">地址：{{data.collegeInfo.address}}</p>
              <p v-if="data.collegeInfo.officialWebsite">官网：{{data.collegeInfo.officialWebsite}}</p>
            </div>
          </div>
        </div>
        <div v-show="curIndex===1" style="height:100%">
          <div v-if="categoryList.length>0" style="height:100%">
            <major-list ref="majorList" :categoryList="categoryList" :majorData="majorData" :text="text" :fromSchool="'1'" :collegeId="collegeId"></major-list>
          </div>
          <no-content v-else :text="text"></no-content>
        </div>
        <div v-if="curIndex===2" class="scroll-wrap score-wrap">
          <div class="list list-wrap content padding-t">
            <!-- 院校分数线 -->
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>院校分数线</h3>
            </div>
            <div>
              <com-select :data="conditionList" :choiceIndex="schoolIndex" @choice="selectSchoolSwitch"></com-select>
              <div class="table">
                <table v-if="collegeScoreLine.length>0" cellspacing="0">
                  <thead>
                    <tr class="theader">
                      <td>年份</td>
                      <td>批次</td>
                      <td>最高分</td>
                      <td>最低分</td>
                      <td>平均分</td>
                      <td>最低位次</td>
                      <td>录取数</td>
                    </tr>
                  </thead>
                  <tbody v-for="(obj,index) in collegeScoreLine" :key="index">
                    <tr v-for="(item,i) in obj" :key="i">
                      <td :rowspan="obj.length" :class="i>0?'none':''">{{item.year}}</td>
                      <td>{{item.enrollBatch.name}}</td>
                      <td>{{item.maxScore}}</td>
                      <td>{{item.minScore}}</td>
                      <td>{{item.averageScore}}</td>
                      <td>{{item.minRank}}</td>
                      <td>{{item.enrollCount}}</td>
                    </tr>
                  </tbody>
                </table>
                <no-content v-else text="暂无数据"></no-content>
              </div>
            </div>
            <!-- 专业分数线 -->
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>专业分数线</h3>
            </div>
            <div>
              <com-select :data="conditionList2" :choiceIndex="majorIndex" @choice="selectMajorSwitch"></com-select>
              <div class="table">
                <table v-if="majorScoreLine.length>0" cellspacing="0">
                  <colgroup>
                    <col width="80">
                    <col width="160">
                    <col>
                    <col width="100">
                    <col width="100">
                    <col width="100">
                    <col width="120">
                    <col width="120">
                  </colgroup>
                  <thead>
                    <tr class="theader">
                      <td>年份</td>
                      <td>批次</td>
                      <td>专业</td>
                      <td>最高分</td>
                      <td>最低分</td>
                      <td>平均分</td>
                      <td>最低位次</td>
                      <td>录取数</td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item,index) in majorScoreLine" :key="index">
                      <td :rowspan="majorScoreLine.length" :class="index>0?'none':''">{{item.year}}</td>
                      <td>{{item.enrollBatch.name}}</td>
                      <td>{{item.name}}</td>
                      <td>{{item.maxScore}}</td>
                      <td>{{item.minScore}}</td>
                      <td>{{item.averageScore}}</td>
                      <td>{{item.minRank}}</td>
                      <td>{{item.enrollCount}}</td>
                    </tr>
                  </tbody>
                </table>
                <no-content v-else text="暂无数据"></no-content>
                <paginate :total="totalElements" :current-page="page" @pagechange="pagechange" :display="size"></paginate>
              </div>
            </div>
          </div>
        </div>
        <div v-if="curIndex===3" class="scroll-wrap simple">
          <!-- 招生简章 -->
          <div class="item recruit">
            <div class="vertical-bar"></div>
            <h3>招生简章</h3>
            <div class="choice mleft-25">
              <com-select :data="yearData2" :choiceIndex="recruitmentindex" @choice="recruitmentSwitch"></com-select>
            </div>
          </div>
          <div class="enrollGuide">
            <ul v-if="enrollGuideList.length>0">
              <li class="item-stripe" v-for="(item,index) in enrollGuideList" :key="index">
                <nuxt-link :to="'enroll-detail?id='+item.id+'&collegeId='+collegeId+'&year='+yearRecruitment">{{item.title}}</nuxt-link>
              </li>
            </ul>
            <no-content v-else text="暂无数据"></no-content>
            <div class="paginate">
              <paginate :total="enrollGuideTotal" :fromSchool="1" :current-page="enrollGuidePage" @pagechange="enrollGuidePagechange" :display="size"></paginate>
            </div>
          </div>
          <!-- 招生计划 -->
          <div class="item recruit">
            <div class="vertical-bar"></div>
            <h3>招生计划</h3>
            <div class="choice mleft-25">
              <com-select :data="yearData2" :choiceIndex="planIndex" @choice="planSwitch"></com-select>
            </div>
          </div>
          <div class="table">
            <table v-if="enrollStudentPlanList.length>0" cellspacing="0">
              <colgroup>
                <col width="120">
                <col>
                <col width="160">
                <col width="120">
                <col width="100">
                <col width="100">
              </colgroup>
              <thead>
                <tr class="theader">
                  <td>招生代码</td>
                  <td>专业名称</td>
                  <td>招生批次</td>
                  <td>计划数</td>
                  <td>学制</td>
                  <td>学费</td>
                </tr>
              </thead>
              <tbody v-for="(item,index) in enrollStudentPlanList" :key="index">
                <!-- <tr v-for="(item,i) in obj" :key="i">
                  <td>{{item.code}}</td>
                  <td>{{item.name}}</td>
                  <td :rowspan="obj.length" :class="i>0?'none':''">{{item.batch}}</td>
                  <td>{{item.planCount}}</td>
                  <td>{{item.yearOfStudy}}</td>
                  <td>{{item.price}}</td>
                </tr> -->
                <tr>
                  <td>{{item.code}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.enrollBatch.name}}</td>
                  <td>{{item.planCount}}</td>
                  <td>{{item.yearOfStudy}}</td>
                  <td>{{item.price}}</td>
                </tr>
              </tbody>
            </table>
            <no-content v-else text="暂无数据"></no-content>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { api, formatDate } from '@/utils'
import majorList from '~/components/majorList'
import comSelect from '~/components/comSelect'
export default {
  layout: 'zhiyuan',
  data () {
    return {
      list: ['概况', '专业', '分数线', '招生'],
      curIndex: 0,
      collegeId: 0,
      data: {},
      isPraise: false,
      page: 1,
      enrollGuidePage: 1,
      pages: 0,
      size: 15,
      categoryList: [],
      majorData: [],
      totalElements: 0,
      schoolProvinceId: 0,
      schoolArtId: 0,
      majorProvinceId: 0,
      majorArtId: 0,
      majorYear: 0,
      yearPlan: 2016,
      yearRecruitment: 2016,
      yearData: {},
      yearData2: {},
      isSchooScore: false,
      conditionList: {},
      conditionList2: {},
      majorScoreLine: [],
      collegeScoreLine: [],
      enrollGuideList: [],
      enrollGuideTotal: 0,
      enrollStudentPlanList: [],
      text: '数据加载中',
      schoolIndex: [0, 0],
      majorIndex: [0, 0, 0],
      recruitmentindex: [0],
      planIndex: [0]
    }
  },
  components: {
    majorList,
    comSelect
  },
  methods: {
    deepClone (obj) {
      let _obj = JSON.stringify(obj)
      return JSON.parse(_obj)
    },
    tabSwitch (index) {
      this.curIndex = index
      if (index === 0) {
        this.getCollegeInfo()
      } else if (index === 1) {
        this.categoryList = []
        this.$axios.get(api.zhiyuanQueryMajorByCollege, { params: { collegeId: this.collegeId } }).then(data => {
          if (data.length > 0) {
            this.majorData = data
            this.text = ''
            this.lodash.map(data, (item) => {
              this.categoryList.push({
                id: item.id,
                name: item.name
              })
            })
          } else {
            this.text = '暂无数据'
          }
        })
      } else if (index === 2) {
        this.getCollegeScoreLine()
        this.getCollegeMajorScoreLine()
      } else if (index === 3) {
        this.getEnrollGuideList()
        this.getEnrollStudentPlan()
      }
    },
    // 下拉院校分数线
    selectSchoolSwitch (obj, index) {
      switch (index) {
        case 0:
          this.schoolProvinceId = obj.id
          break
        case 1:
          this.schoolArtId = obj.id
          break
      }
      this.getCollegeScoreLine()
    },
    // 下拉专业分数线
    selectMajorSwitch (obj, index) {
      switch (index) {
        case 0:
          this.majorProvinceId = obj.id
          break
        case 1:
          this.majorArtId = obj.id
          break
        case 2:
          this.majorYear = obj.id
          break
      }
      this.page = 1
      this.pages = 0
      this.getCollegeMajorScoreLine()
    },
    // 下拉简章
    recruitmentSwitch (obj, index) {
      switch (index) {
        case 0:
          this.yearRecruitment = obj.id
          break
      }
      this.enrollGuidePage = 1
      this.pages = 0
      this.getEnrollGuideList()
    },
    // 下拉计划
    planSwitch (obj, index) {
      switch (index) {
        case 0:
          this.yearPlan = obj.id
          break
      }
      this.getEnrollStudentPlan()
    },
    /* 关注 */
    follow () {
      this.$axios.get(api.zhiyuanSetFavorite, { params: { type: 1, id: this.collegeId } }).then(data => {
        this.isPraise = !this.isPraise
      })
    },
    /* 院校分数线 */
    getCollegeScoreLine () {
      this.$axios.get(api.zhiyuanQueryCollegeScoreLine, { params: { collegeId: this.collegeId, provinceId: this.schoolProvinceId, scienceAndArt: this.schoolArtId } }).then(data => {
        if (data.length > 0) {
          this.collegeScoreLine = data
        } else {
          this.collegeScoreLine = []
        }
      })
    },
    // 分页
    pagechange (currentPage) {
      this.page = currentPage
      this.pages = currentPage - 1
      this.getCollegeMajorScoreLine()
    },
    /* 专业分数线 */
    getCollegeMajorScoreLine () {
      this.$axios.get(api.zhiyuanQueryMajorScoreLine, { params: { collegeId: this.collegeId, provinceId: this.majorProvinceId, scienceAndArt: this.majorArtId, year: this.majorYear, page: this.pages, size: this.size } }).then(data => {
        this.majorScoreLine = data.content
        this.totalElements = data.totalElements
      })
    },
    /* 院校详情 */
    getCollegeInfo () {
      this.$axios.get(api.zhiyuanQueryByCollegeId, { params: { collegeId: this.collegeId } }).then(data => {
        this.data = data.college
        this.isPraise = data.isPraise
      })
    },
    /* 招生简章列表 */
    getEnrollGuideList () {
      this.$axios.get(api.zhiyuanQueryEnrollGuideList, { params: { collegeId: this.collegeId, year: this.yearRecruitment, size: this.size, page: this.pages } }).then(data => {
        this.enrollGuideList = data.content
        this.enrollGuideTotal = data.totalElements
      })
    },
    /* 分页 */
    enrollGuidePagechange (currentPage) {
      this.pages = currentPage - 1
      this.enrollGuidePage = currentPage
      this.getEnrollGuideList()
    },
    /* 招生计划 */
    getEnrollStudentPlan () {
      this.$axios.get(api.zhiyuanQueryEnrollStudentPlan, { params: { collegeId: this.collegeId, year: this.yearPlan } }).then(data => {
        this.enrollStudentPlanList = data
      })
    }
  },
  beforeMount () {
    let years = []
    let years2 = []
    for (let i = 0; i < 4; i++) {
      years.push({ id: `${formatDate(new Date(), 'yyyy') - i - 1}`, name: formatDate(new Date(), 'yyyy') - i - 1 })
      years2.push({ id: `${formatDate(new Date(), 'yyyy') - i}`, name: formatDate(new Date(), 'yyyy') - i })
    }
    this.$set(this.yearData, 'year', years)
    this.$set(this.yearData2, 'year', years2)
    let userInfo = this.$store.state.userInfo
    console.log(userInfo)
    let provinces = userInfo.province.id
    // let year = userInfo.startYear
    let year = years[0].id
    let year2 = years2[0].id
    this.schoolProvinceId = provinces
    this.majorProvinceId = provinces
    this.majorYear = year
    this.yearPlan = year2
    this.yearRecruitment = year2
    this.collegeId = this.$route.query.collegeId
    for (let x in this.yearData) {
      this.yearData[x].isShow = false
      this.yearData2[x].isShow = false
    }
    // 获取下拉列表信息
    this.$axios.get(api.zhiyuanQueryScoreCondition).then(data => {
      let _a = []
      data.scienceAndArt.forEach((item, index) => {
        let _aa = {}
        _aa.id = item
        _aa.name = item
        _a.push(_aa)
      })
      data.scienceAndArt = _a

      this.schoolArtId = data.scienceAndArt[0].id
      this.majorArtId = data.scienceAndArt[0].id
      for (let x in data) {
        data[x].isShow = false
      }
      this.conditionList = this.deepClone(data)
      this.conditionList2 = this.deepClone(data)
      this.conditionList2['year'] = years
      // this.majorYear = this.conditionList2.year[0].id
      // 根据用户信息更改下拉框默认索引值
      let userProvinces = this.lodash.findIndex(this.conditionList.provinces, (item) => {
        return item.id === provinces
      })
      let userYear = this.lodash.findIndex(this.conditionList2.year, (item) => {
        return item.id === year
      })
      this.schoolIndex.splice(0, 1, userProvinces)
      this.majorIndex.splice(0, 1, userProvinces)
      this.majorIndex.splice(2, 1, userYear)
      this.recruitmentindex.splice(0, 1, userYear)
      this.planIndex.splice(0, 1, userYear)
    })
    this.getCollegeInfo()
    /* let os = document.documentElement || document.body
    window.addEventListener('scroll', (e) => {
      if (os.scrollTop < 100) {
        if (this.$refs.majorList) {
          this.$refs.majorList.currentIndex = 0
        }
      }
    }) */
  }
}
</script>

<style scoped lang="scss">
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  /deep/ .paginate {
    .pagination {
      margin-right: 0px;
    }
  }
  /deep/ .major > li > a:hover {
    color: $positive;
  }
}
.school-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  padding: 0 25px;
  .school-content {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .city {
    display: flex;
    align-items: center;
    span {
      margin-left: 30px;
    }
  }
}
.content {
  flex: 1;
  position: relative;
  .tab-content {
    height: 100%;
    .scroll-wrap {
      height: 100%;
    }
  }
}
.mleft-25 {
  margin-left: 25px;
}
.recruit {
  align-items: center;
}
.enrollGuide {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  li {
    padding: 25px 10px;
    a {
      text-decoration: underline;
      font-size: $size16;
      &:hover {
        color: $positive;
      }
    }
  }
}
.none {
  display: none;
}
.item {
  .row {
    .text {
      margin-right: 10px;
    }
  }
}
.score-wrap {
  margin-left: -20px;
}
.padding-t,
.simple {
  .item {
    &:not(:first-child) {
      padding-top: 30px;
    }
    padding-bottom: 12px;
  }
}
.icon-text {
  margin-top: 20px;
}
</style>
